<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 8用router-link组件来导航 -->
            <router-link to='/index'>首页</router-link>
            <router-link to='/login'>登录</royter-link>
            <!-- 7指定路由所映射组件所展示的区域 -->
            <router-view></router-view>
        </div>
        <script>
            // 5创建路由映射的组件
            var Index ={
                template : '<div>这是首页</div>'
            }
            var Login = {
                template : '<h2>请登录</h2>'
            }
            // 2创建路由对象
            var router = new VueRouter({
                // 3创建路由配置
                routes : [
                    // 4配置具体路由
                    {
                        name : 'Index',
                        path : '/index',
                        component :Index
                    },
                    {
                        name : 'Login',
                        path : '/login',
                        component :Login
                    },
                ]
            })
            var vm = new Vue({
                el: '#app',
                // 6注入路由，从而让整个应用有路由功能
                router,
                data: {

                }
            })
        </script>
    </body>
</html>